<template>
  <!-- 侧边栏 -->
  <el-aside :width="iscollapse ? '64px' : '200px'">
    <div class="toggle-button" @click="toggleCollapse">|||</div>
    <!-- 侧边栏菜单区域 -->
    <!-- router 默认是true  -->
    <el-menu
      background-color="#333744"
      text-color="#fff"
      active-text-color="#409EFF"
      :collapse="iscollapse"
      :collapse-transition="false"
      router
      :default-active="$route.path"
    >
      <!-- 一级菜单 -->
      <!-- :index="item.id + ' '"
          :index只接受字符串
          但item.id是一个数值
          数值和字符串并接会得到一个字符串
          所以:  
          item.id + ' '
          -->
      <el-submenu
        :index="item.id + ' '"
        v-for="item in menulist"
        :key="item.id"
      >
        <!-- 一级菜单的模板区域 -->
        <template slot="title">
          <!-- 图标 -->
          <i :class="iconsObj[item.id]"></i>
          <!-- 文本 -->
          <span>{{ item.authName }}</span>
        </template>
        <!-- 二级菜单 -->
        <el-menu-item
          :index="'/' + subItem.path"
          v-for="subItem in item.children"
          :key="subItem.id"
        >
          <!-- 一级菜单的模板区域 -->
          <template slot="title">
            <!-- 图标 -->
            <i class="el-icon-menu"></i>
            <!-- 文本 -->
            <span>{{ subItem.authName }}</span>
          </template>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </el-aside>
</template>
<script>

export default
  {
    data() {
      return {
        // 左侧菜单数据
        menulist: [],
        iconsObj: {
          '125': 'iconfont icon-user',
          '103': 'iconfont icon-tijikongjian',
          '101': 'iconfont icon-shangpin',
          '102': 'iconfont icon-danju',
          '145': 'iconfont icon-baobiao'
        },
        // 是否折叠
        iscollapse: false
      }
    },
    created() {
      this.getMenuList()
      this.activePath = window.sessionStorage.getItem('activePath')
    },
    methods: {
      // 获取所有的菜单
      async getMenuList() {
        const { data: res } = await this.$http.get('menus')

        if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
        this.menulist = res.data
        // console.log(res)
      },
      // 点击按钮 切换菜单的折叠和展开
      toggleCollapse() {
        this.iscollapse = !this.iscollapse
      },
    }
  }
</script>

<style lang="less" scoped>
.el-aside {
  overflow: hidden;
  transition: width 0.2s;
  background-color: #333744;
}

.toggle-button {
  background-color: #4a5064;
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}

.el-menu {
  border-right: 0;
}
.iconfont {
  margin-right: 15px;
}
</style>>
